<template>
  <div class="classbox">
    <a-card title="优质品牌列表" style="width: 100%">
      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="openmodal">新增优质品牌</a-button>
      </div>
      <a-divider />
      <div class="class_table">
        <a-table
          :columns="columns"
          :rowKey="excellentbrandList => excellentbrandList.id"
          :dataSource="excellentbrandList"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination">
          <div slot="logo" slot-scope="row">
            <img :src="row.logo" alt="" srcset="" style="width:100px">
          </div>
          <div slot="active" slot-scope="row">
            <span class="goodsurl" @click="doedit(row)">改</span>
            <a-popconfirm title="确定删除吗?" ok-text="删除" cancel-text="取消" @confirm="delExcellentBrand(row.id)">
              <span class="goodsurl quan">删</span>
            </a-popconfirm>
          </div>
        </a-table>
        <a-modal
          :title="isadd===true?'新增优质品牌':'修改优质品牌'"
          :visible="visible"
          width="1000px"
          :confirm-loading="confirmLoading"
          ok-text="确认"
          cancel-text="取消"
          @ok="dochange()"
          @cancel="handleCancel">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            class="form_box">
            <a-form-model-item label="">
              <div class="display">
                <div class="display">
                  <div style="width:149px;text-align: right;margin-right:10px">品牌分类: </div>
                  <a-select
                    v-model="form.class_id"
                    placeholder="请选择品牌分类"
                    size="large"
                    style="width:200px"
                    @change="classchange">
                    <a-select-option :value="item.id" v-for="(item,index) in classList" :key="index">
                      {{ item.class_name }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="display">
                  <div style="width:149px;text-align: right;margin-right:10px">商品品牌: </div>
                  <a-select
                    v-model="form.brand_id"
                    placeholder="请选择商品品牌"
                    size="large"
                    style="width:200px"
                    show-search
                    :filter-option="filterOption">
                    <div slot="dropdownRender" slot-scope="menu">
                      <v-nodes :vnodes="menu" />
                      <a-divider style="margin: 4px 0;" />
                      <div
                        style="padding: 4px 8px; cursor: pointer;text-align: center;"
                        @mousedown="e => e.preventDefault()">
                        <a-pagination
                          size="small"
                          v-model="current"
                          :pageSize="pagesize"
                          :total="salecount"
                          @change="pageChange" />
                      </div>
                    </div>
                    <a-select-option :value="item.id" v-for="(item,index) in saleList" :key="index">
                      {{ item.brand_name }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="logo" prop="logo">
              <div class="showimg_mian">
                <div class="showimg">
                  <a-upload
                    v-if="form.logo==''"
                    name="file"
                    action="https://jfk-api.letuilm.com/api/upload_img"
                    list-type="picture-card"
                    :multiple="false"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    @change="handleChange3">
                    <div class="nogoodsimg">
                      <div class="no_main">
                        <a-icon type="fund" />
                        <p>
                          请上传品牌Logo
                        </p>
                      </div>
                    </div>
                  </a-upload>
                  <div v-else class="img_box">
                    <img :src="form.logo" alt="" srcset="">
                    <a-icon type="close-circle" @click="closeimg" />
                  </div>
                </div>
              </div>
            </a-form-model-item>

            <a-form-model-item label="品牌介绍" prop="desc">
              <a-input v-model="form.desc" placeholder="请输入品牌介绍！" />
            </a-form-model-item>
            <a-form-model-item label="品牌标签" prop="label">
              <a-input v-model="form.label" placeholder="请输入品牌标签！" />
            </a-form-model-item>
            <a-form-model-item label="品牌历史" prop="brand_history">
              <a-textarea
                v-model="form.brand_history"
                :auto-size="{ minRows: 3, maxRows: 6 }"
                placeholder="请简述品牌历史"
                allow-clear />
            </a-form-model-item>
            <a-form-model-item label="品牌定位" prop="brand_location">
              <a-input v-model="form.brand_location" placeholder="请输入品牌定位！" />
            </a-form-model-item>
            <a-form-model-item label="消费群体" prop="consumption_group">
              <a-input v-model="form.consumption_group" placeholder="请输入品牌对应的消费群体！" />
            </a-form-model-item>
            <a-form-model-item label="设置内容" prop="content">
              <a-input v-model="form.content" placeholder="请输入设置内容" />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div>
    </a-card>

  </div>
</template>

<script>
  import {
    getExcellentBrandList,
    addExcellentBrand,
    updateExcellentBrand,
    delExcellentBrand
  } from '@/api/highbrand'
  import {
    getClassList,
    getGoodsBrand
  } from '@/api/goods'
  //   import Moment from 'moment'

  export default {
    name: 'Class',
        components: {
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes
      }
    },
    data () {
      return {
        saleList: [ // 选择品牌列表
          // {
          //   id: 1,
          //   brand_name: 'haier'
          // }
        ],
        classList: [ // 选择商品分类列表
          // {
          //   id: 1,
          //   class_name: '女装'
          // }
        ],
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 20
        },
        endOpen: false,
        isadd: false,
        visible: false,
        confirmLoading: false,
        count: 0,
        columns: [{
            title: 'ID',
            width: 150,
            align: 'center',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: 'logo',
            align: 'center',
            scopedSlots: {
              customRender: 'logo'
            }
          },
          {
            title: '介绍',
            align: 'center',
            dataIndex: 'desc',
            scopedSlots: {
              customRender: 'desc'
            }
          },
          {
            title: '标签',
            align: 'center',
            dataIndex: 'label',
            scopedSlots: {
              customRender: 'label'
            }
          },
          {
            title: '商品分类',
            align: 'center',
            dataIndex: 'class_name',
            scopedSlots: {
              customRender: 'class_name'
            }
          },
          {
            title: '品牌名称',
            align: 'center',
            dataIndex: 'brand_name',
            scopedSlots: {
              customRender: 'brand_name'
            }
          },
          {
            title: '品牌历史',
            align: 'center',
            dataIndex: 'brand_history',
            scopedSlots: {
              customRender: 'brand_history'
            }
          },
          {
            title: '品牌定位',
            align: 'center',
            dataIndex: 'brand_location',
            scopedSlots: {
              customRender: 'brand_location'
            }
          },
          {
            title: '消费群体',
            align: 'center',
            dataIndex: 'consumption_group',
            scopedSlots: {
              customRender: 'consumption_group'
            }
          },
          {
            title: '设置内容',
            align: 'center',
            dataIndex: 'content',
            scopedSlots: {
              customRender: 'content'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }

        ],
        pagination: {
          pageSize: 15,
          page: 1
        },
        loading: false,
        excellentbrandList: [],
        balist: [],
        form: {
          class_id: '', // 分类id
          brand_id: '', // 品牌id
          logo: '', // logo
          desc: '', // 介绍
          label: '', // 标签
          brand_history: '', // 品牌历史
          brand_location: '', // 品牌定位
          consumption_group: '', // 消费群体
          content: '' // 设置内容
        },
        rules: {
          class_id: [{
            required: true,
            message: '请选择品牌分类',
            trigger: 'blur'
          }],
          brand_id: [{
            required: true,
            message: '请选择品牌',
            trigger: 'blur'
          }],
          logo: [{
            required: true,
            message: '请选择品牌',
            trigger: 'blur'
          }],
          desc: [{
            required: true,
            message: '请输入品牌介绍！',
            trigger: 'blur'
          }],
          label: [{
            required: true,
            message: '请输入品牌标签！',
            trigger: 'blur'
          }],
          brand_history: [{
            required: true,
            message: '请输入品牌历史！',
            trigger: 'blur'
          }],
          brand_location: [{
            required: true,
            message: '请输入品牌定位！',
            trigger: 'blur'
          }],
          consumption_group: [{
            required: true,
            message: '请输入消费群体！',
            trigger: 'blur'
          }],
          content: [{
            required: true,
            message: '请输入设置内容！',
            trigger: 'blur'
          }]
        },
         classid: '',
        salecount: 0,
        current: 1,
        pagesize: 100
      }
    },

    computed: {

    },
    created () {
      this.getExcellentBrandList(1, 15)
    },
    mounted () {

    },
    methods: {
       classchange (val) {
        this.classid = val
        this.getGoodsBrand(val, 1, this.pagesize)
      },
      pageChange (page, pageSize) {
        console.log(page, pageSize)
        this.getGoodsBrand(this.classid, page, this.pagesize)
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getExcellentBrandList(params.page, 15)
      },
      // 根据分类查询商品品牌
      getGoodsBrand (id, page, size) {
        getGoodsBrand({
            class_id: id,
            page: page,
            pagesize: size
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('品牌返回', res)
              if (res.code === 200) {
                this.salecount = res.data.count
                this.saleList = res.data.data
              }
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 获取分类
      getClassList () {
        getClassList({
            page: 1,
            pagesize: 999999
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('获取分类返回', res)
              this.classList = res.data
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      closeimg () {
        this.form.logo = ''
      },
      handleChange3 (info) {
        // console.log('info', info)
        this.form.logo = `//` + info.file.response.data.url
      },
      // 删除优质商品
      delExcellentBrand (id) {
        delExcellentBrand({
            id: id
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('返回', res)
              this.getExcellentBrandList(1, 15)
              this.$message.success('删除成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      doedit (row) {
        this.getClassList()
        this.getGoodsBrand(row.class_id, 1, this.pagesize)
        // console.log(row)
        this.form = row
        // this.form.activity_id = row.id
        this.isadd = false
        this.visible = true
      },
      handleCancel () {
        this.visible = false
        this.form = this.$options.data().form
      },
      openmodal () {
        this.getClassList()
        this.saleList = []
        this.isadd = true
        this.visible = true
      },
      dochange () {
        if (this.isadd === true) {
          addExcellentBrand(this.form).then(res => {
            // console.log('新增返回', res)
            if (res.code === 200) {
              this.$message.success('新增成功!')
              this.handleCancel()
              this.getExcellentBrandList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          updateExcellentBrand(this.form).then(res => {
            // console.log('修改返回', res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.handleCancel()
              this.getExcellentBrandList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },

      // 获取优质商品列表
      getExcellentBrandList (page, pagesize) {
        this.loading = true
        getExcellentBrandList({
            page: page,
            pagesize: parseInt(pagesize)
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('优质商品列表返回', res)
              this.count = res.data.count
              this.excellentbrandList = res.data.data
              const pagination = {
                ...this.pagination
              }
              pagination.total = res.data.count
              this.pagination = pagination
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .display {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: right;
    margin-bottom: 10px;
  }

  .showimg_mian {
    display: flex;

    .anticon-play-circle {
      font-size: 67px;
    }

    .showimg {
      width: 238px;
      //   height: 264px;
      margin-right: 20px;

      /deep/.ant-upload {
        width: 238px;
        // height: 264px;
        padding: 0px;
      }

      .nogoodsimg {
        // border: 1px solid #ccc;
        text-align: center;

        .no_main {
          width: 150px;
          margin: 35px auto;

          .anticon-fund {
            font-size: 67px;
          }
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .img_box {
      position: relative;
      color: white;

      img {
        width: 100%;
        height: 100%;
      }

      .anticon-close-circle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 24px;
        cursor: pointer;
        display: none;
        transition: all 0.3s linear;
      }

      img:hover+.anticon-close-circle {
        display: block;
      }

      .anticon-close-circle:hover {
        display: block;
        transform: rotate(90deg);
      }
    }
  }

  .class_table {

    .goodsurl {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 18px;
      // font-weight: bolder;
      text-align: center;
      border-radius: 50%;
      // padding: 5px;
      color: gray;
      cursor: pointer;
      border: 1px solid gray;
    }

    .ant-table-row:hover {
      .goodsurl {
        background-color: orange;
        color: #fff;
        // font-weight: bolder;
        border: none;
      }

      .quan {
        background-color: red;
      }
    }
  }
</style>
